<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>配置编辑</title>

    <!-- load a custom version of Ace editor -->
    <script src="/ace/ace.js"></script>

    <!-- load the minimalist version of JSONEditor, which doesn't have Ace embedded -->
    <link href="/jsoneditor/dist/jsoneditor.css" rel="stylesheet"
          type="text/css">
    <script src="/jsoneditor/dist/jsoneditor-minimalist.js"></script>

    <style type="text/css">
        #jsoneditor {
            width: 98%;
            height: 600px;
            margin: 0 auto;
        }

        .op {
            width: 98%;
            margin: 10px auto;
        }

        .op a {
            float: right;
        }

        body, html {
            font-family: "DejaVu Sans", sans-serif;
        }

        p, li {
            width: 98%;
            font-size: 10.5pt;
        }

        code {
            background: #f5f5f5;
        }

        div.jsoneditor {
            border: 1px solid #50a3a2;
        }

        div.jsoneditor-menu {
            background-color: #50a3a2;
            border-bottom: 1px solid #50a3a2;
        }

        button {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            outline: 0;
            background-color: #50a3a2;
            border: 0;
            padding: 8px 15px;
            color: white;
            border-radius: 3px;
            width: 180px;
            cursor: pointer;
            font-size: 14px;
            -webkit-transition-duration: 0.25s;
            transition-duration: 0.25s;
        }
    </style>

</head>
<body>
<div id="jsoneditor"></div>
<div class="op">
    <button class="update-btn">提交更新</button>
    <a href="javascript:;" class="logout">退出登录</a>
</div>
<script src="/jquery/jquery-3.1.1.min.js"></script>
<script>
    // create the editor
    var container = document.getElementById('jsoneditor');
    var options = {
        mode: 'code',
        ace: ace
    };
    var editor = new JSONEditor(container, options, {});

    $.ajax({
        type: "POST",
        url: "/config/detail",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify(editor.get()),
        dataType: "json",
        success: function (data) {
            editor.set(data.data);
        },
        error: function (e) {
            if (e.responseJSON.code == 40100) {
                location.href = "/";
            }
        }
    });

    $(".update-btn").click(function () {
        $.ajax({
            type: "POST",
            url: "/config/update",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(editor.get()),
            dataType: "json",
            success: function (data) {
                if (data.code == 20000) {
                    alert("配置更新成功");
                    window.location.href = "/config.html";
                }
            },
            error: function (e) {
                if (e.responseJSON.code == 40100) {
                    location.href = "/";
                } else {
                    alert(e.responseJSON.message);
                }
            }
        });
    });

    $(".logout").click(function () {
        $.ajax({
            type: "POST",
            url: "/logout",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(editor.get()),
            dataType: "json",
            success: function (data) {
                if (data.code == 20000) {
                    window.location.href = "/";
                }
            },
            error: function (e) {
                if (e.responseJSON.code == 40100) {
                    location.href = "/";
                } else {
                    alert(e.responseJSON.message);
                }
            }
        });
    });
</script>
</body>
</html>
